<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/css/my.css">
</head>
<body class="body">
<div class="modal" id="modal">
    <div class="modal-body">
        <div class="modal-header">
            <h3>警告</h3>
            <button class="modal-close">&times;</button>
        </div>
        <hr>
        <p id="login-alert">这是一个警告信息！</p>
    </div>
</div>
<div class="login-container">
    <div class="login-wrapper">
        <div class="login-intro">
            <h2>欢迎访问K8s管理平台!</h2>
            <p>此平台是兼具Kubernetes、ansible、prometheus一体的管理平台。</p>
        </div>
        <div class="login-form">
            <form id="login-form" action="{% url 'auth:login' %}" method="POST">
                {% csrf_token %}
                <label class="form-label" for="username">Username</label>
                <input class="form-input" type="text" id="username" name="username" required
                       placeholder="Enter your username" autocomplete="off">
                <label class="form-label" for="password">Password</label>
                <input class="form-input" type="password" id="password" name="password" required
                       placeholder="Enter your password" autocomplete="off">
                <button class="form-btn" type="submit">登录</button>
                <div id="notice" class="form-notice"></div>
            </form>
        </div>
    </div>
</div>
{#<script src="/static/js/jquery.min.js"></script>#}
<script>
    const loginForm = document.getElementById("login-form");
    const alertDiv = document.getElementById("modal");
    const closeModalButton = document.querySelector(".modal-close");

    closeModalButton.onclick = function () {
        alertDiv.style.display = "none";
    };

    window.onclick = function (event) {
        if (event.target === modal) {
            alertDiv.style.display = "none";
        }
    };

    loginForm.addEventListener("submit", (event) => {
        event.preventDefault();
        const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value;
        const username = document.getElementById("username").value.trim();
        const password = document.getElementById("password").value.trim();
        const hrefSearch = window.location.search;
        // ajax 请求改为fetch请求，省去了导入jquery.min.js
        {#$.ajax({#}
        {#    url: "{% url 'auth:login' %}",#}
        {#    type: 'POST',#}
        {#    data: {#}
        {#        username: username,#}
        {#        password: password,#}
        {#        csrfmiddlewaretoken: csrf, // 如果使用 Django 框架，需要添加 csrf_token#}
        {#    },#}
        {#    success: function (response) {#}
        {#        console.log(response);#}
        {#    },#}
        {#    error: function (error) {#}
        {#        console.error(error);#}
        {#    }#}
        // });

        fetch('{% url "auth:login" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrf,
            },
            body: JSON.stringify({
                username: username,
                password: password,
                hrefSearch: hrefSearch,
            }),
        })
            .then(response => {
                // 处理响应
                response.json().then(function (data) {
                    if (data.code === 0) {
                        window.location.href = data.href_search
                    } else {
                        document.getElementById('login-alert').innerHTML = data.message;
                        alertDiv.style.display = "flex";
                    }
                })
            })
            .catch(error => {
                document.getElementById('login-alert').innerHTML = error;
                alertDiv.style.display = "flex";
            });
    })
    ;
</script>

</body>
</html>